import React, { Component } from 'react';
import { StyleSheet, NativeModules, TouchableOpacity, Image } from 'react-native';
import { Container, Content, Icon, Button, Text, View } from 'native-base';
import { ListItem, Avatar } from 'react-native-elements';
import { connect } from 'react-redux';

import { Header, Loading } from '../component';
import { Colors, Metrics } from '../theme';
import Http from '../utils/HttpPost';

class Publish extends Component {
  constructor(props) {
    super(props);
    this.state = {
      headPortrait: '',
      isLoading: false,
    }
  }

  UNSAFE_componentWillMount() {

  }

  componentDidMount() {
    if (this.props.headPortrait) {
      this.setState({ headPortrait: this.props.headPortrait })
    }
  }

  selectPublishTypeFunc(types, uri) {
    this.props.setPublishInfo({ publishType: types });
    this.props.navigation.navigate(uri);
  }


  render() {
    return (
      <Container>
        <Header title="管理任务" isTabBar={true} />
        <Loading showLoading={this.state.isLoading} />
        <Content >
          <View style={Styles.userContent}>
            <View style={Styles.userContentLeft}>
              <View style={Styles.headerContentNew}>
                {
                  this.state.headPortrait ?
                    <Avatar
                      size="medium"
                      rounded
                      source={this.state.headPortrait}
                      onPress={() => this.props.navigation.navigate('UserCenter')}
                      activeOpacity={0.7}
                    /> :
                    <Avatar
                      size="medium"
                      rounded
                      source={require('../asserts/images/user/headPortrait.jpg')}
                      onPress={() => this.props.navigation.navigate('UserCenter')}
                      activeOpacity={0.7}
                    />
                }
              </View>

              <View style={Styles.userNick}>
                <Text style={Styles.userNickText}> {this.props.nickName} </Text>
                <View style={Styles.userLableCont}>
                  <Text style={Styles.userLable}>已实名</Text>
                  <Text style={Styles.userLable}>超级会员</Text>
                </View>
              </View>
            </View>

            <View style={Styles.userIdCont}>
              <Text style={Styles.userIdText}> ID: {this.props.inviteCode} </Text>
              <View>
                <Text style={Styles.userVipText}>开通VIP</Text>
              </View>
            </View>
          </View>





          <Text style={Styles.myTitles}>简单需求</Text>
          <View style={Styles.flexContents}>

            <TouchableOpacity style={Styles.boxContents} onPress={() => { this.selectPublishTypeFunc('1', 'KanjiaHb') }}>
              <Icon type="FontAwesome" name='download' style={Styles.boxIcons} />
              <Text >砍价红包</Text>
            </TouchableOpacity>
            <TouchableOpacity style={Styles.boxContents} onPress={() => { this.selectPublishTypeFunc('2', 'ToupiaoGz') }}>
              <Icon type="FontAwesome" name='certificate' style={Styles.boxIcons} />
              <Text>关注投票</Text>
            </TouchableOpacity>
            <TouchableOpacity style={Styles.boxContents} onPress={() => { this.selectPublishTypeFunc('3', 'ZhuanfaFx') }}>
              <Icon type="FontAwesome" name='share-square' style={Styles.boxIcons} />
              <Text >分享转发</Text>
            </TouchableOpacity>

          </View>

          <Text style={Styles.myTitles}>下载APP</Text>
          <View style={Styles.flexContents}>

            <TouchableOpacity style={Styles.boxContents} onPress={() => { this.selectPublishTypeFunc('4', 'XiazaiZc') }}>
              <Icon type="FontAwesome" name='registered' style={Styles.boxIcons} />
              <Text >下载注册</Text>
            </TouchableOpacity>

          </View>
          <Text style={Styles.myTitles}>{this.props.publishType}</Text>


        </Content>
      </Container>
    );
  }

}

const mapStateToProps = state => ({
  logged: state.user.logged,
  token: state.user.token,
  phone: state.user.phone,
  nickName: state.user.nickName,
  headPortrait: state.user.headPortrait,
  inviteCode: state.user.inviteCode,
  level: state.user.level,
});

const mapDispatchToProps = dispatch => ({
  setPublishInfo: publishInfo => dispatch({ type: 'SET_PUBLISHINFO', payload: { publishInfo } }),
});

export default connect(mapStateToProps, mapDispatchToProps)(Publish);

const Styles = StyleSheet.create({
  flexContents: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center'
  },
  myTitles: {
    textAlign: 'center',
    color: Colors.subject,
    marginTop: 28,
    marginBottom: 8
  },
  boxContents: {
    width: Metrics.screenWidth / 3,
    justifyContent: 'center',
    alignItems: 'center'
  },
  boxIcons: {
    color: Colors.subject,
    padding: 8
  },
  userContent: { marginTop: 18, flexDirection: "row", justifyContent: "space-between", alignItems: "center", paddingLeft: 15, paddingRight: 15 },
  userContentLeft: { flexDirection: "row", },
  userNick: { marginLeft: 2 },
  userNickText: { fontSize: 14, marginTop: 6, marginLeft: 6 },
  userLableCont: { flexDirection: "row", alignItems: 'center', },
  userLable: { marginTop: 6, marginLeft: 6, paddingLeft: 6, paddingRight: 6, lineHeight: 18, borderRadius: 9, backgroundColor: Colors.subjectJbZuo, color: Colors.bai, fontSize: 10 },
  userIdCont: { marginTop: 6, },
  userIdText: { textAlign: 'right', fontSize: 10, color: Colors.hui66 },
  userVipText: { marginTop: 6, textAlign: 'right', fontSize: 12, color: Colors.subjectJbZuo },
});